<script setup lang="ts">
import { useFeedbackController } from '@/utils/feedback-util'
import FPInputConfig from '@/views/main/dev-tool/function-design/function-edit/config/FPInputConfig.vue'
import FPSelectConfig from '@/views/main/dev-tool/function-design/function-edit/config/FPSelectConfig.vue'
import { ref } from 'vue'
import type { FPComponentType } from '@/components/function-parameter'

const props = defineProps(['modelValue'])
const emits = defineEmits(['update:modelValue'])

//<--对话框打开关闭控制
const { isShow, close } = useFeedbackController(props, emits)
//对话框打开关闭控制-->

const fpcType = ref<FPComponentType>('input')
</script>

<template>
  <el-dialog v-model="isShow" :show-close="false" class="add-fpc-dialog">
    <template #header>
      <div class="header">
        <div class='title'>添加组件</div>
        <el-select size="small" v-model="fpcType">
          <el-option label="Input" value="input" />
          <el-option label="Select" value="select" />
        </el-select>
      </div>
    </template>
    <f-p-input-config v-if="fpcType === 'input'" />
    <f-p-select-config v-else-if="fpcType === 'select'" />
    <template #footer>
      <el-button @click="close">取消</el-button>
      <el-button type="primary">确认</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.add-fpc-dialog {
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title{
      font-weight: bolder;
    }
  }
}
</style>
<style lang="scss">
.add-fpc-dialog {
  .el-dialog__header {
    margin-right: 0 !important;
  }
}
</style>
